<template>
 <el-card>
  <el-table border :data="skuList">
    <el-table-column label="序号" type="index"></el-table-column>
    <el-table-column label="名称" prop="skuName"></el-table-column>
    <el-table-column label="描述" prop="skuDesc"></el-table-column>
    <el-table-column label="默认图片">
      <template v-slot="{row}">
        <el-image style="width: 100px; height: 100px" :src="row.skuDefaultImg"  />
      </template>
    </el-table-column>
    <el-table-column label="重量（KG）" prop="weight"></el-table-column>
    <el-table-column label="价格(元)" prop="price"></el-table-column>
    <el-table-column label="操作">
      <template v-slot="{row,$index}">
          <el-tooltip v-if="row.isSale==1" class="box-item" effect="dark" content="上架" placement="top" >
            <el-button type="info" size="small" :icon="Top" @click="toOnSale(row,$index)"></el-button>
          </el-tooltip>
          <el-tooltip v-else class="box-item" effect="dark" content="下架" placement="top">
            <el-button type="info" size="small" :icon="Bottom" @click="toCancelSale(row,$index)"></el-button>
          </el-tooltip>
          <el-tooltip class="box-item" effect="dark" content="修改Spu" placement="top" >
            <el-button type="primary" size="small" :icon="Edit" ></el-button>
          </el-tooltip>
          <el-tooltip class="box-item" effect="dark" content="查看Spu" placement="top" >
            <el-button type="info" size="small" :icon="InfoFilled" @click="toCheckSkuInfo(row.id)"></el-button>
          </el-tooltip>
          <el-popconfirm confirm-button-text="Yes" cancel-button-text="No" title="真的要删除此属性吗?" @confirm="delOneSkuInfo(row.id)">
            <template #reference>
              <div style="display: inline-block;margin-left:10px">
                <el-tooltip class="box-item" effect="dark" content="删除Spu" placement="top">
                  <el-button type="danger" size="small" :icon="Delete"></el-button>
                </el-tooltip>
              </div>
            </template>
          </el-popconfirm>

      </template>
    </el-table-column>
  </el-table>
  <el-pagination v-model:current-page="currentPage" v-model:page-size="pageSize" :page-sizes="[3,5,10,20]" :small="small" :disabled="disabled" :background="background" layout="prev, pager, next, jumper,->,sizes,total" :total="total" @size-change="handleSizeChange" @current-change="handleCurrentChange" />
    <el-drawer v-model="drawer" size="45%" :title="skuInfo.skuName" :direction="direction">
      <el-row :gutter="20">
        <el-col :span="5">名称</el-col>
        <el-col :span="15">{{ skuInfo.skuName }}</el-col>
      </el-row>
      <el-row :gutter="20">
        <el-col :span="5">描述</el-col>
        <el-col :span="15">{{ skuInfo.skuDesc }}</el-col>
      </el-row>
      <el-row :gutter="20">
        <el-col :span="5">价格</el-col>
        <el-col :span="15">{{ skuInfo.price }}.00</el-col>
      </el-row>
      <el-row :gutter="20">
        <el-col :span="5">平台属性</el-col>
        <el-col :span="15">
          <el-tag v-for="attrValue in skuInfo.skuAttrValueList" :key="attrValue.id" style="margin-right:6px">{{ attrValue.attrName }}-{{ attrValue.valueName }}</el-tag>
        </el-col>
      </el-row>
      <el-row :gutter="20">
        <el-col :span="5">销售属性</el-col>
        <el-col :span="15">
          <el-tag v-for="saleAttr in skuInfo.skuSaleAttrValueList" :key="saleAttr.id" style="margin-right:6px">{{ saleAttr.saleAttrName }}-{{ saleAttr.saleAttrValueName }}</el-tag>
        </el-col>
      </el-row>
      <el-row :gutter="20">
        <el-col :span="5">商品图片</el-col>
        <el-col :span="15">
          <el-carousel indicator-position="outside">
            <el-carousel-item v-for="skuImg in skuInfo.skuImageList" :key="skuImg.id">
              <el-image :src="skuImg.imgUrl" style="width:100%"></el-image>
            </el-carousel-item>
          </el-carousel>
        </el-col>
      </el-row>
    </el-drawer>
 </el-card>
</template>

<script lang="ts">
import { defineComponent } from 'vue';
export default defineComponent({
  name: 'Sku'
});
</script>

<script setup lang="ts">
import {ref,onMounted} from 'vue'
import {reqCancelSale,reqOnSale,reqGetOneSku,reqDelOneSku} from '@/api/product/sku'
import { Top, Bottom,Edit,Delete,InfoFilled } from '@element-plus/icons-vue';
import {reqGetSku} from '@/api/product/sku'
import { ElMessage } from 'element-plus';
const currentPage = ref<number>(1);
const pageSize = ref<number>(8);
const small = ref<boolean>(false);
const background = ref<boolean>(false);
const disabled = ref<boolean>(false);
const total = ref<number>(0);
const loading = ref<boolean>(false);
const skuList = ref([])
const skuInfo = ref({})
const drawer = ref(false)
const direction = ref('rtl');
//获取sku页数据的函数
const getSkuData = async()=>{
  const result = await reqGetSku(currentPage.value,pageSize.value)
  console.log(result)
  total.value = result.total
  skuList.value = result.records

}
//页面一挂载就请求sku列表数据
onMounted(()=>{
  getSkuData()
})

// 3. 当页面改变的时候
const handleCurrentChange = (val: number) => {
  // console.log(`current page: ${val}`);
  currentPage.value = val;
  getSkuData()
};

// 4. 当当前页码显示的数量变化时
const handleSizeChange = (val: number) => {
  pageSize.value = val;
  currentPage.value = 1;
  getSkuData()
};
//上架按钮函数
const toOnSale =async({id},index)=>{
  console.log(id,'id');
  
  const res = await reqOnSale(id)
  console.log(res,'res');
  
  skuList.value[index].isSale = 0;
}

//下架按钮函数
const toCancelSale =async({id},index)=>{
  console.log(id)
  await reqCancelSale(id)
  skuList.value[index].isSale=1;
}
//查看spu函数 
const toCheckSkuInfo = async(id:number)=>{
  const result = await reqGetOneSku(id)
  console.log(result)
  skuInfo.value= result
  drawer.value = true
}
//删除一条sku函数

const delOneSkuInfo = async(skuId:number)=>{
  await reqDelOneSku(skuId)
  ElMessage.success('删除sku成功')
  getSkuData()
}
</script>

<style scoped>
</style>